<template>
  <el-dialog
    title="系统提示"
    :model-value="visible"
    destroy-on-close
    center
    modal
    :close-on-click-modal="false"
    :show-close="false"
    width="35%"
  >
    <strong>
      <el-alert
        title="您的客户端密钥为"
        :description="secret"
        type="success"
        :closable="false"
        show-icon
      />
    </strong>
    <br />
    <strong>
      <el-alert
        title="请妥善保管密钥，关闭窗口后密钥将无法在任何地方查看"
        type="warning"
        :closable="false"
        show-icon
      />
    </strong>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="danger"
          :icon="useRenderIcon('material-symbols:close')"
          @click="visible = false"
        >
          关闭
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

const visible = ref(false);
const secret = ref<string>();

export function openMessage(val: string) {
  secret.value = val;
  visible.value = true;
}

export default defineComponent({
  methods: { useRenderIcon },
  setup() {
    return {
      visible,
      secret,
    };
  },
});
</script>

<style scoped></style>
